<template>
    <div style="background-color: white;">
        <input type="text" v-model="keyword" placeholder="输入关键词检索" @keyup.enter="searchKnowledge"
            class="search-input" />
            <el-button type="primary" @click="searchKnowledge()">
                知识检索
              </el-button>
        <ul v-loading="loading">
            <!-- <li v-for="result in searchResults" :key="result.id" class="result-item">
                <div   
                @dblclick.prevent="$router.push({ name: '知识详情', params: { id: result.id } })"   
                class="clickable-title"  
                title="双击查看详情"  
            >  
            <h2 style="color: blueviolet;" v-html="result.zsbt"></h2>  
            
            </div>  
                <div v-html="result.highlightContent"></div>
            </li> -->

            <li v-for="result in searchResults" :key="result.id" class="result-item">  
            <div   
                class="clickable-title"  
                @dblclick.prevent="$router.push({ name: '知识详情', params: { id: result.id } })"  
                title="双击查看详情"  
            >  
                <h2 style="color: blueviolet; display: inline-block; margin-right: 10px;" v-html="result.zsbt"></h2>  
                <el-button size="small" type="info" class="view-detail-btn" @click="$router.push({ name: '知识详情', params: { id: result.id } })">查看详情</el-button>  
            </div>  
            <div v-html="result.highlightContent"></div>  
        </li>  
        </ul>
        {{ notFound }}
    </div>
    <!-- 分页 -->
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
        layout="total, sizes, prev, pager, next, jumper" />

</template>

<script setup lang="ts">
import { searchApi } from '@/api/knowledgeBase/knowledge.js'
import { ref } from 'vue';

const searchResults = ref([])
const keyword = ref("")
const notFound = ref("")
const pageIndex = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)

const searchKnowledge = () => {
    if (keyword.value) {

        loading.value = true
        searchApi({
            page: pageIndex.value,
            limit: pageSize.value,
            keyWord: keyword.value
        }).then(({ data }) => {

            searchResults.value = data.list
            total.value = data.totalCount
            if (data.list.length == 0) {
                notFound.value = "没有找到结果"
            } else {
                notFound.value = ""
            }
        })

        loading.value = false
    }
}

// 修改每页数
const sizeChangeHandle = val => {
    pageSize.value = val
    pageIndex.value = 1
    searchKnowledge()
}

// 修改当前页
const currentChangeHandle = val => {
    pageIndex.value = val
    searchKnowledge()
}

</script>

<style scoped>
.search-input {
    width: 50%;
    /* 假设你想要搜索框占据整行的宽度 */
    padding: 10px;
    /* 添加内边距 */
    border: 1px solid #ccc;
    /* 添加边框 */
    border-radius: 5px;
    /* 添加圆角 */
    background-color: #fff;
    /* 设置背景色 */
    font-size: 16px;
    /* 设置字体大小 */
    transition: border-color 0.3s ease;
    margin-right: 15px;
}

.search-input:focus {
    border-color: #007bff;
    /* 当搜索框获取焦点时改变边框颜色 */
    outline: none;
    /* 移除默认的focus轮廓 */
}

.result-item {
    margin-bottom: 20px;
    /* 添加底部边距来隔开每个项目 */
    padding: 10px;
    /* 添加内边距以增强可读性 */
    border-bottom: 1px solid;
    /* 添加底部边框作为分隔线 */
    list-style-type: none;
    /* 移除默认的列表样式 */
}

.result-item h3 {
    margin: 0;
    /* 移除h3标签默认的边距 */
}

/* 最后一个列表项不需要底部边框 */
.result-item:last-child {
    border-bottom: none;
}
.clickable-title {  
    cursor: pointer; /* 即便我们现在是双击，但光标样式仍然可以表示可点击 */  
    display: flex; /* 使用 flex 布局来确保标题和按钮在同一行 */  
    align-items: center; /* 垂直居中 */  
}  
  
.view-detail-btn {  
    /* 这里可以添加针对“查看详情”按钮的样式 */  
    margin-right: 10px
}  
</style>